<template>
  <PageWrapper class="ztable" contentFullHeight>
    <vxe-grid ref='xGrid' v-bind="gridOptions">
      <template #tbtns>
        <vxe-input v-model="formData.name" placeholder="输入名称查询"></vxe-input>
        <vxe-button @click="searchEvent" status="primary">查 询</vxe-button>
        <vxe-button @click="deleteEvent($refs.xGrid)">删 除</vxe-button>
      </template>
      <template #name_default="{ row }">
          <span style="cursor:pointer;color: #3e9ece"
                @click="editEvent({id:row.id},openDrawer)">{{ row.name }}</span>
      </template>
      <template #state_default="{ row }">
        <span v-show="row.state==='end'" class="ant-tag ant-tag-success">成功</span>
        <span v-show="row.state==='stop'" class="ant-tag ant-tag-warning">失败</span>
      </template>
    </vxe-grid>
    <EtlLogDrawer @register="registerDrawer" @success="handleSuccess"/>
  </PageWrapper>
</template>
<script lang="ts">
export default {name: 'BiEtlLog', inheritAttrs: false}
</script>
<script lang="ts" setup>
import {PageWrapper} from '/@/components/Page';
import {reactive, ref} from 'vue'
import {GroupOutlined} from '@ant-design/icons-vue';
import {VxeGridInstance, VxeGridProps} from 'vxe-table'
import EtlLogDrawer from './EtlLogDrawer.vue';
import {useDrawer} from '/@/components/Drawer';
import {deleteEvent, addEvent, editEvent, createOption} from '/@/comps/vxe/list';
import { useGo } from '/@/hooks/web/usePage';

const xGrid = ref({} as VxeGridInstance)
const formData = reactive({name: ''})
const go = useGo();

const gridOptions = reactive<VxeGridProps>(createOption('/bi/etl/log', {}, formData, [
  {type: 'checkbox', align: 'center', width: 42, fixed: 'left'},
  // {type: 'seq', align: 'center', width: 50, fixed: 'left'},
  {field: 'id', title: '编号', width: 100, fixed: 'left'},
  {field: 'name', title: '任务名称', width: 300, fixed: 'left', slots: {default: 'name_default'}},
  {field: 'entim', title: '开始时间', width: 160},
  {field: 'lotim', title: '结束时间', width: 160},
  {field: 'xxxxx', title: '其他信息'},
  { field: "state", title: "状态", width: 60, align: "center", slots: { default: "state_default" } },
  // {field: 'state', title: '结束时间', width: 160},
  // {field: 'lodat', title: '时间', width: 160},
  // {field: 'dedat', title: '时间', width: 160},
  // {field: 'redat', title: '时间', width: 160},
]));

const searchEvent = () => {
  xGrid.value.commitProxy('query')
}

//--------------------------------------------------------------------------------------------------
const [registerDrawer, {openDrawer}] = useDrawer();

function handleSuccess() {
  searchEvent();
}
</script>

